<style scoped lang="scss">
.keyDown {
  background: #2c3e50;
}
body {
  margin: 0px;
}
.box {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    flex: 0.06;
    background-color: #fff;
  }
  main {
    flex: 0.9;
    width: 100%;
    background-color: #f2f2f2;
  }
  footer {
    width: 100%;
    flex: 0.06;
    // background-color: #e80d0d;
  }
}
.message-item {
  width: 100%;
  margin-bottom: 0.5rem;
}
.flex-left {
  display: flex;
  justify-content: flex-start;
  // background-color: #e80d0d;
}
.flex-right {
  display: flex;
  justify-content: flex-end;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 10px;
  overflow: hidden;
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
<template>
  <div class="box">
    <header>
      <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
      <div class="message-item" v-for="(item, index) in messageList" :key="index">
        <div class="flex-left" v-if="item.userId !== userInfo.userId">
          <div class="avatar">
            <img
              src="https://www.keaitupian.cn/cjpic/frombd/2/253/1676065055/2828606542.jpg"
              alt=""
            />
          </div>
          <div class="message-content">
            <p>{{ 'w' + item.userId }}</p>
            <p>{{ item.content }}</p>
          </div>
        </div>
        <div class="flex-right" v-else>
          <div class="message-content">
            <p>{{ 'w' + item.userId }}</p>
            <div>{{ item.content }}</div>
          </div>
          <div class="avatar">
            <img
              src="https://ts1.cn.mm.bing.net/th/id/R-C.f94b9202d33f187002be09f1cf3be3ec?rik=X4t9O3gfB%2fiOAg&riu=http%3a%2f%2fimg.sucaijishi.com%2fuploadfile%2f2023%2f0221%2f20230221013648837.png%3fimageMogr2%2fformat%2fjpg%2fblur%2f1x0%2fquality%2f60&ehk=IhQfM%2f3PYN1uDUJRn7%2f%2bEuIvhjz1tvEZM03WatipHxE%3d&risl=&pid=ImgRaw&r=0"
              alt=""
            />
          </div>
        </div>
      </div>
    </main>
    <footer>
      <div id="app">
        <div>
          <div>
            <input
              id="elem"
              type="text"
              keyboard="true"
              v-model="yourMessage"
              @keyup.enter="sendMessage"
            />
            <button @click="sendMessage">submit</button>
          </div>
          <!-- {params: blurHide}：布尔值，ture为输入框失去焦点时自动隐藏键盘 -->
          <!-- <keyboard
            :transitionTime="'0.5s'"
            :maxQuantify="10"
            :showKeyboard="showKeyboard"
            @clickKey="clickKey"
            float
            :manyDict="chowder"
            :singleDict="baseDict"
            @clickNumber="clickNumber"
            :blurHide="false"
          ></keyboard> -->
        </div>
      </div>
    </footer>
  </div>
</template>
<!--
<script setup>
import { ref, onMounted } from 'vue'
import keyboard from '@/compentents/keyboard/keyboardIndex.vue'
import chowder from './dict/chowder.json'
import baseDict from './dict/baseDict.json'
const onClickLeft = () => history.back()
const showKeyboard = ref(false)
const userInfo = ref({})
const yourMessage = ref('')
const messageList = ref([])
const onlineList = ref([])
let ws = null

//点击键盘的值
const clickKey = (key) => {}
//点击键盘时数字的值
const clickNumber = (key) => {
}

const sendMessage = () => {
  if (yourMessage.value) {
    ws.send(
      JSON.stringify({
        type: 'message',
        userId: userInfo.value.userId,
        content: yourMessage.value,
      }),
    )

    yourMessage.value = ''
  }
}

const initWebsocket = () => {
  ws = new WebSocket('ws://localhost:8888/')
  console.log(ws)

  ws.onopen = () => {
    console.log('websocket连接成功')
    ws.send(
      JSON.stringify({
        type: 'init',
        userId: userInfo.value.userId,
        content: '欢迎来到聊天室',
      }),
    )
  }

  ws.onerror = () => {
    console.log('websocket连接失败')
  }

  ws.onmessage = (data) => {
    const message = JSON.parse(data.data)
    switch (message.type) {
      case 'tips':
        console.log(message.content)
        break
      case 'message':
        messageList.value.push(message)
        break
      case 'onlineList':
        onlineList.value = message.list
        break
      default:
        break
    }
  }

  ws.onclose = () => {
    console.log('websocket连接关闭')
  }
}

onMounted(() => {
  userInfo.value.userId = new Date().getTime().toString().slice(8)
  console.log(userInfo.value.userId)
  initWebsocket()
})
</script> -->
<script setup>
import { ref, onMounted } from "vue";
const userInfo = ref({
  userId: "",
});
const yourMessage = ref("");
const messageList = ref([]);
const onlineList = ref([]);
let ws = null;

const sendMessage = () => {
  if (yourMessage.value) {
    ws.send(
      JSON.stringify({
        type: "message",
        userId: userInfo.value.userId,
        content: yourMessage.value,
      })
    );

    yourMessage.value = "";
  }
};

const initWebsocket = () => {
  ws = new WebSocket("ws://localhost:8888/");
  console.log(ws);

  ws.onopen = () => {
    console.log("websocket连接成功");
    ws.send(
      JSON.stringify({
        type: "init",
        userId: userInfo.value.userId,
        content: "欢迎来到聊天室",
      })
    );
  };

  ws.onerror = () => {
    console.log("websocket连接失败");
  };

  ws.onmessage = (data) => {
    const message = JSON.parse(data.data);
    switch (message.type) {
      case "tips":
        console.log(message.content);
        break;
      case "message":
        messageList.value.push(message);
        break;
      case "onlineList":
        onlineList.value = message.list;
        break;
      default:
        break;
    }
  };

  ws.onclose = () => {
    console.log("websocket连接关闭");
  };
};

onMounted(() => {
  userInfo.value.userId = new Date().getTime().toString().slice(8);
  initWebsocket();
});
</script>
<template>
  <!-- <van-sticky>
    <van-button type="primary">
      <van-nav-bar title="标题" left-text="返回" left-arrow @click-left="onClickLeft" />
    </van-button>
  </van-sticky> -->
  <div class="box">
    <header></header>
    <main></main>
    <footer></footer>
  </div>
</template>
<script setup lang="ts">
// const onClickLeft = () => history.back()
</script>

<style  scoped lang="scss">
.box{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  header{
    flex: .0;
    width: 100%;
    background-color: #ff0000;
  }
  main{
    flex: .84;
    width: 100%;
    background-color: #eee;
  }
  footer{
    flex: .08;
    width: 100%;
    background-color: #ff0000
  }
}
</style>
